/* eslint-disable standard/object-curly-even-spacing */
<template>
  <div class="course">
    <el-card class="card">
      <!-- 课程页面 -->
      <div v-show="slideCourse">
        <!-- 面包页名 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索框 -->
        <div class="user-search">
          <el-input
          clearable
          placeholder="请输入课程名"
          v-model="query"
          class="input-with-select"
          @clear="getCourseclear()"
          @input="getcourselist()"
          >
          </el-input>
          <el-button type="success" class="user-btn" @click="addbtn()">添加课程</el-button>
          <!-- <el-button type="primary" class="user-btn" style="width:130px" @click="watch()">查看课程目标</el-button> -->
        </div>
        <!-- 列表信息 -->
        <div class="text">
          <el-table
          :data="list"
          stripe
          style="width: 100%"
          height="470"
          v-loading="loading"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="课程编号">
                    <span>{{ props.row.number }}</span>
                  </el-form-item>
                  <el-form-item label="课程名称">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="课程性质">
                    <span>{{ props.row.nature }}</span>
                  </el-form-item>
                  <el-form-item label="课程类型">
                    <span>{{ props.row.category}}</span>
                  </el-form-item>
                  <el-form-item label="理论课时">
                    <span>{{ props.row.tperiod }}</span>
                  </el-form-item>
                  <el-form-item label="实验课时">
                    <span>{{ props.row.eperiod }}</span>
                  </el-form-item>
                  <el-form-item label="学分">
                    <span>{{ props.row.score }}</span>
                  </el-form-item>
                  <el-form-item label="版本号">
                    <span>{{ props.row.version }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="课程编号"
              prop="number"
              width="120"
              >
            </el-table-column>
            <el-table-column
              label="课程名称"
              prop="name"
              width="180"
              >
            </el-table-column>
            <el-table-column
              label="课程性质"
              prop="nature"
              width="100"
              >
            </el-table-column>
            <el-table-column
              label="课程类别"
              prop="category"
              width="180"
              >
            </el-table-column>
            <el-table-column
              label="课程负责人"
              prop="supervisorName"
              width="100"
              >
            </el-table-column>
            <el-table-column
            prop="editor"
            label="编辑"
            >
              <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editor(scope.row)"
                >
                </el-button>
                <el-button
                size="mini"
                plain type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteOpen(scope.row)"
                >
                </el-button>
                <el-button
                type="primary"
                plain
                round
                size="mini"
                @click="courseAim(scope.row)"
                >
                关联课程目标
                </el-button>
                <el-button
                type="primary"
                plain
                round
                size="mini"
                @click="graduate(scope.row)"
                >
                关联毕业要求
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <div class="Conpager">
            <el-pagination
            class='stu-pager'
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 目标页面 -->
      <div v-show="slideAim">
        <!-- 面包页名 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程管理</el-breadcrumb-item>
          <el-breadcrumb-item>课程目标管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索框 -->
        <div class="user-search">
          <el-input
            disabled
            v-model="courseName"
            class="input-with-select"
            >
          </el-input>
          <el-button type="success" class="addexam-btn" @click="addAimbtn()">添加目标</el-button>
          <el-button type="primary" class="back-btn" @click="back()">返回</el-button>
        </div>
          <!-- 表格数据 -->
        <div class="text">
          <el-table
          :data='aimdata'
          stripe
          style="width: 100%"
          height="470"
          >
            <el-table-column
            type="index"
            width="40"
            >
            </el-table-column>
            <el-table-column
            prop="name"
            label="名称"
            width="80"
            >
            </el-table-column>
            <el-table-column
            prop="content"
            label="内容"
            width="650"
            >
            </el-table-column>
            <el-table-column
            prop="editor"
            label="编辑"
            >
              <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                circle
                @click="aimeditor(scope.row)"
                >
                </el-button>
                <el-button
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                circle
                @click="aimdeleteOpen(scope.row)"
                >
                </el-button>
                 <el-button
                type="primary"
                plain
                round
                size="mini"
                @click="AimToGraduate(scope.row)"
                >
                关联毕业要求
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 添加目标组件 -->
      <el-dialog title="添加目标" :visible.sync="dialogAimadd" style=" min-width: 1300px" @opened="ToFocus(1)">
        <el-form :model="Aimform" style="margin-right:130px">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="Aimform.name" autocomplete="off" ref="one" @keyup.native="jump($event,3)"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="Aimform.content" autocomplete="off" @keyup.native.enter="sureAimform()" @keyup.native="jump($event,4)"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureAimform()">确 定</el-button>
          <el-button @click="dialogAimadd = false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 编辑目标组件 -->
      <el-dialog title="编辑目标" :visible.sync="dialogAimAdit" style=" min-width: 1300px" @opened="ToFocus(2)">
        <el-form :model="Aimform" style="margin-right:130px">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="Aimform.name" autocomplete="off" ref="two" @keyup.native="jump($event,5)"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="Aimform.content" autocomplete="off" @keyup.native.enter="sureAimedit()" @keyup.native="jump($event,6)"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureAimedit()">确 定</el-button>
          <el-button @click="dialogAimAdit = false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 编辑课程组件 -->
      <el-drawer
      title="编辑课程信息"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      @opened="ToFocus(3)"
      >
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item label="课程编号" :label-width="formLabelWidth">
              <el-input v-model="form.number" autocomplete="off" style="width:300px" ref="three" @keyup.native="jumper($event,3)"></el-input>
            </el-form-item>
            <el-form-item label="课程名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" style="width:300px" @keyup.native="jumper($event,4)"></el-input>
            </el-form-item>
            <el-form-item label="课程性质" :label-width="formLabelWidth">
              <el-select v-model="form.nature" placeholder="请选择课程性质" style="width:250px" @keyup.native="jumper($event,5)">
                <el-option label="必修" value="必修"></el-option>
                <el-option label="选修" value="选修"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程类型" :label-width="formLabelWidth">
              <el-select v-model="form.category" placeholder="请选择课程类型" style="width:250px" @keyup.native="jumper($event,6)">
                <el-option label="专业教育核心课" value="专业教育核心课"></el-option>
                <el-option label="通识教育核心课" value="通识教育核心课"></el-option>
                <el-option label="跨学科基础课" value="跨学科基础课"></el-option>
                <el-option label="通识教育拓展课" value="通识教育拓展课"></el-option>
                <el-option label="学科专业拓展课" value="学科专业拓展课"></el-option>
                <el-option label="方向特色课程" value="方向特色课程"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="理论课时" :label-width="formLabelWidth">
              <el-input v-model="form.tperiod " autocomplete="off" style="width:200px" @keyup.native="jumper($event,7)"></el-input>
            </el-form-item>
            <el-form-item label="实验课时" :label-width="formLabelWidth">
              <el-input v-model="form.eperiod " autocomplete="off" style="width:200px" @keyup.native="jumper($event,8)"></el-input>
            </el-form-item>
            <el-form-item label="学分" :label-width="formLabelWidth">
              <el-input v-model="form.score" autocomplete="off" style="width:200px" @keyup.native="jumper($event,9)"></el-input>
            </el-form-item>
            <el-form-item label="版本号" :label-width="formLabelWidth">
              <el-input v-model="form.version" autocomplete="off" style="width:300px" @keyup.native="jumper($event,10)"></el-input>
            </el-form-item>
            <el-form-item label="课程负责人" :label-width="formLabelWidth">
              <el-select v-model="form.supervisorId" placeholder="请选择老师"  style="width:300px" @keyup.native="jumper($event,11)">
                <el-option v-for="item of teacherlist" :key="item.tid" :label="item.name" :value="item.tid"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
            <el-button type="primary" @click="editinfo()">确定</el-button>
            <el-button @click="dialog = false">取 消</el-button>
          </div>
      </el-drawer>
      <!-- 添加课程组件 -->
      <el-drawer
      title="添加课程信息"
      :visible.sync="editdialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      @opened="ToFocus(4)"
      >
        <div class="demo-drawer__content">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="课程编号" :label-width="formLabelWidth" prop="number">
              <el-input v-model="form.number" autocomplete="off" style="width:300px" ref="four" @keyup.native="jumper($event,3)"></el-input>
            </el-form-item>
            <el-form-item label="课程名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off" style="width:300px"  @keyup.native="jumper($event,4)"></el-input>
            </el-form-item>
            <el-form-item label="课程性质" :label-width="formLabelWidth" prop="nature">
              <el-select v-model="form.nature" placeholder="请选择课程性质" style="width:250px"  @keyup.native="jumper($event,5)">
                <el-option label="必修" value="必修"></el-option>
                <el-option label="选修" value="选修"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程类型" :label-width="formLabelWidth" prop="category">
              <el-select v-model="form.category" placeholder="请选择课程类型" style="width:250px"  @keyup.native="jumper($event,6)">
                <el-option label="专业教育核心课" value="专业教育核心课"></el-option>
                <el-option label="通识教育核心课" value="通识教育核心课"></el-option>
                <el-option label="跨学科基础课" value="跨学科基础课"></el-option>
                <el-option label="通识教育拓展课" value="通识教育拓展课"></el-option>
                <el-option label="学科专业拓展课" value="学科专业拓展课"></el-option>
                <el-option label="方向特色课程" value="方向特色课程"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="理论课时" :label-width="formLabelWidth" prop="tperiod">
              <el-input v-model="form.tperiod " autocomplete="off" style="width:200px"  @keyup.native="jumper($event,7)"></el-input>
            </el-form-item>
            <el-form-item label="实验课时" :label-width="formLabelWidth" prop="eperiod">
              <el-input v-model="form.eperiod " autocomplete="off" style="width:200px"  @keyup.native="jumper($event,8)"></el-input>
            </el-form-item>
            <el-form-item label="学分" :label-width="formLabelWidth" prop="score">
              <el-input v-model="form.score" autocomplete="off" style="width:200px"  @keyup.native="jumper($event,9)"></el-input>
            </el-form-item>
            <el-form-item label="版本号" :label-width="formLabelWidth" prop="version">
              <el-input v-model="form.version" autocomplete="off" style="width:300px"  @keyup.native="jumper($event,10)"></el-input>
            </el-form-item>
            <el-form-item label="课程负责人" :label-width="formLabelWidth" prop="supervisorId">
              <el-select v-model="form.supervisorId" placeholder="请选择老师"  style="width:300px"  @keyup.native="jumper($event,11)">
                <el-option v-for="item of teacherlist" :key="item.tid" :label="item.name" :value="item.tid"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
            <el-button type="primary" @click="createdinfo('form')">确定</el-button>
            <el-button @click="editdialog = false">取 消</el-button>
          </div>
      </el-drawer>
      <!-- 课程关联毕业要求 -->
      <el-drawer
      title="关联毕业要求"
      :visible.sync="graddialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      >
        <el-tabs v-model="activeName" class="changetabs">
          <el-tab-pane label="新增关联指标点" name="first">
            <div class="Qdemo-drawer__content">
              <el-form >
                <el-form-item label="课程名称" :label-width="formLabelWidth">
                  <el-input
                  v-model="courseName"
                  autocomplete="off"
                  disabled
                  style="width:200px"
                  >
                  </el-input>
                </el-form-item>
                <div class="testcolor">*关联的所有指标点的权重相加应为1</div>
                <div class="testcolor">*此处关联的指标点所关联的目标须是该课程所关联的目标</div>
              </el-form>
              <template style="height:400px;overflow:auto">
                <el-table :data="quotasdata" height='250'>
                  <el-table-column prop="number" label="" width="55"></el-table-column>
                  <el-table-column property="content" label="指标点" width="220"></el-table-column>
                  <el-table-column property="weight" label="权重" width="70"></el-table-column>
                  <el-table-column property="content" label="编辑">
                    <template slot-scope="scope">
                      <el-link icon="el-icon-delete" type="danger" :underline=false @click="deleltequotas(scope.row)"></el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="addaim">
                  <el-link icon="el-icon-edit" :underline=false @click="addquota()" title="重复点击，一次可关联多个指标点">新增</el-link>
                </div>
                <el-form v-model="addquotas"  v-show="add" class="Qadd-hidden">
                  <div v-for="(item, index) in addquotas" :key="index" class="little">
                    <el-select v-model="item.qid" placeholder="请选择指标点" style="margin-left:40px;width:200px;display:inline-block">
                      <el-option v-for="mes of quotaslist" :key="mes.$index" :label="mes.number" :value="mes.qid" ></el-option>
                    </el-select>
                    <el-input v-model="item.weight" placeholder="请输入权重" style="width:130px;display:inline-block"></el-input>
                    <el-link :underline=false @click="closeaddquota(index)">&nbsp;&nbsp;&nbsp;&nbsp;关闭</el-link>
                  </div>
                </el-form>
              </template>
            </div>
            <div class="demo-drawer__footer">
              <el-button type="success" @click="quotassave()">保存</el-button>
              <el-button @click="graddialog = false">取 消</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="修改关联指标点" name="second">
            <div class="Qdemo-drawer__content">
              <el-form >
                <el-form-item label="课程名称" :label-width="formLabelWidth">
                  <el-input
                  v-model="courseName"
                  autocomplete="off"
                  disabled
                  style="width:200px"
                  >
                  </el-input>
                </el-form-item>
                <div class="testcolor">*关联的所有指标点的权重相加应为1</div>
              </el-form>
              <template style="height:400px;overflow:auto">
                <el-table :data="editdata" height="380">
                  <el-table-column type="index" label="" width="55"></el-table-column>
                  <el-table-column label="关联指标点">
                    <template  slot-scope="scope">
                      <el-select  v-model="editdata[scope.$index].qid" placeholder="请选择关联指标点"  style="width:160px">
                        <el-option v-for="aim of quotaslist" :key="aim.$index" :label="aim.number" :value="aim.qid"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="权重">
                    <template  slot-scope="scope">
                      <el-input v-model="editdata[scope.$index].weight"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </div>
            <div class="demo-drawer__footer">
              <el-button type="primary" @click="updatedinfo()">确定</el-button>
              <el-button @click="graddialog = false">取 消</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-drawer>
      <!-- 课程目标关联毕业要求 -->
      <el-drawer
      title="关联毕业要求"
      :visible.sync="Aimgraddialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      >
        <el-tabs v-model="activeName" class="changetabs">
          <el-tab-pane label="新增关联指标点" name="first">
            <div class="Qdemo-drawer__content">
              <el-form >
                <el-form-item label="目标名称" :label-width="formLabelWidth">
                  <el-input
                  v-model="aimName"
                  autocomplete="off"
                  disabled
                  style="width:200px"
                  >
                  </el-input>
                </el-form-item>
                <div class="testcolor">*关联的所有指标点的权重相加应为1</div>
                <div class="testcolor">*此处关联的指标点所关联的目标须是该课程所关联的目标</div>
              </el-form>
              <template style="height:400px;overflow:auto">
                <el-table :data="quotasdata" height='250'>
                  <el-table-column prop="number" label="" width="55"></el-table-column>
                  <el-table-column property="content" label="指标点" width="220"></el-table-column> // 要修改qid
                  <el-table-column property="support" label="权重" width="70"></el-table-column>
                  <el-table-column property="edit" label="编辑">
                    <template slot-scope="scope">
                      <el-link icon="el-icon-delete" type="danger" :underline=false @click="QAimdelelte(scope.row)"></el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="addaim">
                  <el-link icon="el-icon-edit" :underline=false @click="addquota()" title="重复点击，一次可关联多个指标点">新增</el-link>
                </div>
                <el-form v-model="addquotas"  v-show="add" class="Qadd-hidden">
                  <div v-for="(item, index) in addquotas" :key="index" class="little">
                    <el-select v-model="item.qid" placeholder="请选择指标点" style="margin-left:40px;width:200px;display:inline-block">
                      <el-option v-for="mes of quotaslist" :key="mes.$index" :label="mes.number" :value="mes.qid" ></el-option>
                    </el-select>
                    <el-input v-model="item.support" placeholder="请输入权重" style="width:130px;display:inline-block"></el-input>
                    <el-link :underline=false @click="closeaddquota(index)">&nbsp;&nbsp;&nbsp;&nbsp;关闭</el-link>
                  </div>
                </el-form>
              </template>
            </div>
            <div class="demo-drawer__footer">
              <el-button type="success" @click="QAimsave()">保存</el-button>
              <el-button @click="Aimgraddialog = false">取 消</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="修改关联指标点" name="second">
            <div class="Qdemo-drawer__content">
              <el-form >
                <el-form-item label="课程名称" :label-width="formLabelWidth">
                  <el-input
                  v-model="aimName"
                  autocomplete="off"
                  disabled
                  style="width:200px"
                  >
                  </el-input>
                </el-form-item>
                <div class="testcolor">*关联的所有指标点的权重相加应为1</div>
              </el-form>
              <template style="height:400px;overflow:auto">
                <el-table :data="editdata" height="380">
                  <el-table-column type="index" label="" width="55"></el-table-column>
                  <el-table-column label="关联指标点">
                    <template  slot-scope="scope">
                      <el-select  v-model="editdata[scope.$index].qid" placeholder="请选择关联指标点"  style="width:160px">
                        <el-option v-for="aim of quotaslist" :key="aim.$index" :label="aim.number" :value="aim.qid"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="权重">
                    <template  slot-scope="scope">
                      <el-input v-model="editdata[scope.$index].support"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </div>
            <div class="demo-drawer__footer">
              <el-button type="primary" @click="QAimupdated()">确定</el-button>
              <el-button @click="Aimgraddialog = false">取 消</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-drawer>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'course',
  data () {
    return {
      loading: false,
      slideCourse: true,
      slideAim: false,
      aimlist: [],
      query: '',
      list: [],
      dialog: false,
      editdialog: false,
      aimdialog: false,
      dialogAimadd: false,
      dialogAimAdit: false,
      graddialog: false,
      Aimgraddialog: false,
      Aimform: [],
      add: false,
      cid: '',
      aid: '',
      courseName: '',
      aimName: '',
      form: {
        category: '',
        eperiod: '',
        name: '',
        nature: '',
        number: '',
        score: '',
        supervisorId: '',
        tperiod: '',
        version: ''
      },
      rules: {
        number: [
          { required: true, message: '请输入教师编号', trigger: 'blur' }
        ],
        nature: [
          { required: true, message: '请选择课程性质', trigger: 'change' }
        ],
        category: [
          { required: true, message: '请选择课程类型', trigger: 'change' }
        ],
        supervisorId: [
          { required: true, message: '请选择课程负责人', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入教师编号', trigger: 'blur' }
        ],
        eperiod: [
          { required: false, message: '请输入实验课时', trigger: 'blur' }
        ],
        score: [
          { required: true, message: '请输入学分', trigger: 'blur' }
        ],
        tperiod: [
          { required: true, message: '请输入理论课时', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
        ]
      },
      aimdata: [],
      aimform: {},
      quotasdata: [],
      editdata: [],
      addquotas: [],
      quotaslist: [],
      teacherlist: [],
      inputs: [],
      formLabelWidth: '100px',
      timer: null,
      pageNum: 1,
      pageSize: 8,
      totalCount: -1,
      activeName: 'first'
    }
  },
  components: {},
  mounted () {
    this.loading = true
  },
  // beforeRouteLeave (to, from, next) {
  //   to.meta.keepAlive = false
  //   next()
  // },
  watch: {
    aimdialog: function () {
      this.add = false
      this.aimform = {}
    },
    graddialog: function () {
      this.add = false
      this.addquotas = []
      this.activeName = 'first'
    }
  },
  methods: {
    // 获取所有课程信息
    async getcourselist () {
      // 需要授权的API必须设置请求头
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      // 后台token的key是token
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`course/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}&name=${this.query}`)
      console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.list = page.list
        this.totalCount = page.totalCount
        this.loading = false
      } else {
        this.$message.error(msg)
        this.loading = false
      }
    },
    // 获取所有毕业要求指标点
    async getquotaslist () {
      const res = await this.$http.get(`quota/list?pageNum=1&pageSize=9999`)
      // console.log(res)
      const {code, msg, page: {list}} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.quotaslist = list
      } else {
        console.log(msg)
      }
    },
    // 获取教师信息
    async getteacherlist () {
      const res = await this.$http.get(`teacher/list?pageNum=1&pageSize=9999&name=`)
      console.log(res)
      const {code, msg, page: {list}} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.teacherlist = list
      } else {
        console.log(msg)
      }
    },
    // 搜索框清除
    getCourseclear () {
      this.getcourselist()
    },
    // 编辑课程
    editor (info) {
      // console.log(info)
      this.form = info
      this.dialog = true
    },
    async editinfo () {
      const res = await this.$http.put('course/update', this.form)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('修改成功！')
        this.getcourselist()
        this.form = {}
        this.dialog = false
      } else {
        this.$message.error('error')
      }
    },
    // 添加课程
    addbtn () {
      this.form = {}
      this.editdialog = true
    },
    createdinfo (formname) {
      this.$refs[formname].validate(async (valid) => {
        if (valid) {
          const res = await this.$http.post('course/save', this.form)
          const {status, msg} = res.data
          // console.log(res)
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '添加成功！'
            })
            this.getcourselist()
            this.editdialog = false
          } else {
            this.$message.error(msg)
          }
        } else {
          this.$message.error('error!')
          return false
        }
      })
    },
    // 删除课程
    deleteOpen (info) {
      console.log(info)
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const cid = info.cid
        const res = await this.$http.delete(`course/delete?courseId=${cid}&confirm=false`)
        console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$http.delete(`course/delete?courseId=${cid}&confirm=true`).then((mes) => {
            console.log(mes)
            const {msg, code} = mes.data
            if (code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getcourselist()
            } else {
              this.$message.error(msg)
            }
          })
          this.getcourselist()
        } else {
          const mess = msg
          this.$confirm(mess + ',是否强制删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.delete(`course/delete?courseId=${cid}&confirm=true`).then((mes) => {
              console.log(mes)
              const {msg, code} = mes.data
              if (code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getcourselist()
              } else {
                this.$message.error(msg)
              }
            })
          }).catch(() => {})
        }
      }).catch(() => {})
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getcourselist()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      // console.log(`当前页: ${val}`)
      this.getcourselistt()
    },
    // 课程目标管理
    async courseAim (mes) {
      this.slideCourse = false
      this.slideAim = true
      const cid = mes.cid
      this.cid = cid
      this.courseName = mes.name
      // console.log(this.cid)
      const res = await this.$http.get(`course_aim/info/${cid}`)
      console.log(res)
      const {code, msg, info} = res.data
      if (code === 200) {
        this.aimdata = info
      } else {
        this.$message.error(msg)
      }
    },
    // 新增课程目标
    addaims () {
      this.add = true
    },
    closeaddaims () {
      this.add = false
    },
    // 删除课程目标
    delelteAim (info) {
      // console.log(info)
      this.$confirm('此操作将解除该课程目标的关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const aid = info.aid
        const res = await this.$http.delete('course_aim/delete', {data: {id: this.cid, ids: [aid]}})
        const {msg, code} = res.data
        if (code === 200) {
          // console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`course_aim/info/${this.cid}`).then((back) => {
            // console.log(back)
            const {info: {aims}} = back.data
            if (back.data.code === 200) {
              this.aimdata = aims
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 查看目标按钮
    watch () {
      this.slideCourse = false
      this.slideAim = true
    },
    // 返回课程页面
    back () {
      this.slideCourse = true
      this.slideAim = false
    },
    // 目标编辑
    aimeditor (info) {
      console.log(info)
      this.Aimform = info
      this.dialogAimAdit = true
    },
    // 修改目标
    async sureAimedit () {
      const res = await this.$http.put('course_aim/update', this.Aimform)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('修改成功！')
        this.getaimlist()
        this.dialogAimAdit = false
      } else {
        this.$message.error('error')
      }
    },
    // 目标删除
    aimdeleteOpen (info) {
      console.log(info)
      this.$confirm('此操作将解除该目标的关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const aid = info.aid
        const res = await this.$http.delete(`course_aim/delete/${aid}`)
        console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`course_aim/info/${this.cid}`).then((back) => {
            // console.log(back)
            const {info} = back.data
            if (back.data.code === 200) {
              this.aimdata = info
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 添加目标
    addAimbtn () {
      this.Aimform = {}
      this.dialogAimadd = true
    },
    async sureAimform () {
      const info = {
        aimList: [{
          content: this.Aimform.content,
          name: this.Aimform.name
        }],
        cid: this.cid
      }
      const back = await this.$http.post('course_aim/save', info)
      const {code, msg} = back.data
      console.log(back)
      if (code === 200) {
        this.$http.get(`course_aim/info/${this.cid}`).then((mess) => {
          const {info} = mess.data
          if (mess.data.code === 200) {
            this.aimdata = info
            this.aimform = {}
            this.dialogAimadd = false
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 获取目标信息
    async getaimlist () {
      const res = await this.$http.get(`aim/list?pageNum=1&pageSize=9999`)
      // console.log(res)
      const {code, msg, page: {list}} = res.data
      if (code === 200) {
        this.aimlist = list
      } else {
        console.log(msg)
      }
    },
    // 课程——毕业要求管理
    async graduate (mes) {
      this.quotasdata = []
      this.addquotas = []
      this.graddialog = true
      const cid = mes.cid
      this.cid = cid
      this.courseName = mes.name
      const res = await this.$http.get(`coursequota/info/${cid}`)
      console.log(res)
      const {code, msg, info} = res.data
      if (code === 200) {
        this.quotasdata = info.quota
        this.editdata = info.quota
      } else {
        console.log(msg)
      }
    },
    // 新增毕业要求指标点按钮
    addquota () {
      this.add = true
      this.addquotas.push({})
    },
    closeaddquota (index) {
      this.addquotas.splice(index, 1)
    },
    // 删除课程关联的毕业要求指标点
    deleltequotas (info) {
      this.$confirm('此操作将解除该指标点的关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const qid = info.qid
        const res = await this.$http.delete('coursequota/delete', {data: {quota: [{qid: qid}], course: {cid: this.cid}}})
        // console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`coursequota/info/${this.cid}`).then((back) => {
            const {code, msg, info: {quota}} = back.data
            if (code === 200) {
              this.quotasdata = quota
              this.editdata = quota
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 增加课程关联毕业要求指标点
    async quotassave () {
      this.add = false
      const info = {
        quota: this.addquotas,
        course: {
          cid: this.cid
        }
      }
      // console.log(info)
      const res = await this.$http.post('coursequota/save', info)
      const {code, msg} = res.data
      // console.log('res', res)
      if (code === 200) {
        this.$message.success('添加成功！')
        this.addquotas = []
        this.$http.get(`coursequota/info/${this.cid}`).then((back) => {
          const {code, msg, info: {quota}} = back.data
          if (code === 200) {
            this.quotasdata = quota
            this.editdata = quota
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 修改课程毕业要求指标点关联
    async updatedinfo () {
      const list = []
      for (var i = 0; i < this.editdata.length; i++) {
        list.push({qid: this.editdata[i].qid, weight: this.editdata[i].weight})
      }
      const info = {
        quota: list,
        course: {
          cid: this.cid
        }
      }
      console.log(info)
      const res = await this.$http.put('coursequota/update', info)
      const {code, msg} = res.data
      console.log('res', res)
      if (code === 200) {
        this.$message.success('修改成功！')
        this.$http.get(`coursequota/info/${this.cid}`).then((back) => {
          const {code, msg, info: {quota}} = back.data
          if (code === 200) {
            this.quotasdata = quota
            this.editdata = quota
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 课程目标-关联毕业要求
    async AimToGraduate (mess) {
      // console.log('mess', mess)
      this.aid = mess.aid
      this.aimName = mess.name
      this.Aimgraddialog = true
      this.quotasdata = []
      this.addquotas = []
      this.editdata = []
      const res = await this.$http.get(`aim_quota/info/${this.aid}`)
      console.log(res)
      const {code, msg, info} = res.data
      if (code === 200) {
        this.quotasdata = info
        this.editdata = info
      } else {
        console.log(msg)
      }
    },
    // 新增目标关联的指标点
    async QAimsave () {
      this.add = false
      const info = {
        aid: this.aid,
        cid: this.cid,
        quotas: this.addquotas
      }
      console.log(info)
      const res = await this.$http.post('aim_quota/save', info)
      const {code, msg} = res.data
      console.log('res', res)
      if (code === 200) {
        this.$message.success('添加成功！')
        this.addquotas = []
        this.$http.get(`aim_quota/info/${this.aid}`).then((back) => {
          console.log(back)
          const {code, msg, info} = back.data
          if (code === 200) {
            this.quotasdata = info
            this.editdata = info
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 修改目标关联的指标点
    async QAimupdated () {
      const info = {
        aid: this.aid,
        cid: this.cid,
        quotas: this.editdata
      }
      console.log(info)
      const res = await this.$http.put('aim_quota/update', info)
      const {code, msg} = res.data
      console.log('res', res)
      if (code === 200) {
        this.$message.success('修改成功！')
        this.$http.get(`aim_quota/info/${this.aid}`).then((back) => {
          const {code, msg, info} = back.data
          if (code === 200) {
            this.quotasdata = info
            this.editdata = info
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 删除目标关联的指标点
    QAimdelelte (info) {
      this.$confirm('此操作将解除该指标点的关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const qid = info.qid
        const res = await this.$http.delete(`aim_quota/delete/${this.cid}`, {data: {ids: [qid], id: this.aid}})
        console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`aim_quota/info/${this.aid}`).then((back) => {
            const {code, msg, info} = back.data
            if (code === 200) {
              this.quotasdata = info
              this.editdata = info
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 获取焦点
    ToFocus (num) {
      if (num === 1) {
        this.$refs.one.focus()
      }
      if (num === 2) {
        this.$refs.two.focus()
      }
      if (num === 3) {
        this.$refs.three.focus()
      }
      if (num === 4) {
        this.$refs.four.focus()
      }
    },
    // 按下按键时输入框的焦点转变-目标
    jump (el, index) {
      this.inputs = document.getElementsByTagName('input')
      // console.log(this.inputs)
      if (index === 3 || index === 5) {
        if (el.keyCode === 13 || el.keyCode === 39 || el.keyCode === 40) {
          this.inputs[index + 1].focus()
          this.inputs[index].blur()
        }
      } else if (index === 4 || index === 6) {
        if (el.keyCode === 37 || el.keyCode === 38) {
          // console.log(this.inputs[index - 1])
          this.inputs[index - 1].focus()
          this.inputs[index].blur()
        } else if (el.keyCode === 13) {
        }
      } else if (index > 7 && index < 15) {
        if (el.keyCode === 13 || el.keyCode === 39 || el.keyCode === 40) {
          // console.log(this.inputs[index + 1])
          this.inputs[index + 1].focus()
          this.inputs[index].blur()
        } else if (el.keyCode === 37 || el.keyCode === 38) {
          // console.log(this.inputs[index - 1])
          this.inputs[index - 1].focus()
          this.inputs[index].blur()
        }
      }
    },
    // 按下按键时输入框的焦点转变-课程
    jumper (el, index) {
      this.inputs = document.getElementsByTagName('input')
      // console.log(this.inputs)
      if (index === 3) {
        if (el.keyCode === 13 || el.keyCode === 39 || el.keyCode === 40) {
          this.inputs[index + 1].focus()
          this.inputs[index].blur()
        }
      } else if (index === 11) {
        if (el.keyCode === 37 || el.keyCode === 38) {
          // console.log(this.inputs[index - 1])
          this.inputs[index - 1].focus()
          this.inputs[index].blur()
        } else if (el.keyCode === 13) {
        }
      } else if (index > 3 && index < 11) {
        if (el.keyCode === 13 || el.keyCode === 39 || el.keyCode === 40) {
          // console.log(this.inputs[index + 1])
          this.inputs[index + 1].focus()
          this.inputs[index].blur()
        } else if (el.keyCode === 37 || el.keyCode === 38) {
          // console.log(this.inputs[index - 1])
          this.inputs[index - 1].focus()
          this.inputs[index].blur()
        }
      }
    }
  },
  created () {
    this.getcourselist()
    this.getquotaslist()
    this.getteacherlist()
  }
}
</script>

<style scoped lang="stylus">
.course,.card
  height 100%
  min-width: 1250px
  .user-search
    margin-top 15px
    width 100%
    .input-with-select
      width 300px
    .user-btn
      width 100px
  .text
    padding-top 10px
    height 380px
    .demo-table-expand
      font-size 0
    .demo-table-expand label
      width 90px
      color #99a9bf
    .demo-table-expand .el-form-item
      margin-right 0
      margin-bottom 0
      width 50%
.testcolor
  margin-left 10px
  padding-top 5px
  font-size 13px
  color red
.Conpager
  margin 0 auto
  padding-top 5px
  .stu-pager
    text-align center
.demo-drawer__content
  padding 0 10px
  height 560px
.Qdemo-drawer__content
  padding 0 10px
  height 520px
.demo-drawer__footer
  text-align right
  margin-right 10px
  margin-top 50px
.addaim
  text-align right
  margin-right 10px
  padding-top 15px
.add-hidden
  padding-top 15px
.changetabs
  padding-left 10px
.Qadd-hidden
  padding-top 0px
  height 140px
  overflow auto
  .little
    margin 5px 0
.dialog-footer
   text-align center
</style>
